<template>
	<view class="bg-white">
		<view class="flex align-center p-2">
			<view class="font-30 text-main align-center justify-center" style="margin-left: 240rpx;">请选择支付方式</view>
			<view style="margin-left: 200rpx;">
				<u-icon name="close" @click="close"></u-icon>
			</view>
		</view>

		<view class="p-2" v-for="(item,index) in palments" :key="index" style="padding: 10rpx 20rpx;height: 200rpx;">
			<view class="flex align-center" @click="changepay(item,index)"  style="height: 80rpx;">
				<u-image :src="item.icon" width="27" height="27"></u-image>
				<view class="ml-1 font-28">{{item.name}}</view>
				<view class="ml-auto">
					<u-image :src="curIndex===index?'/static/select.png':'/static/noselect.png'" width="15" height="15">
					</u-image>
				</view>
			</view>
		</view>

		<template v-if="type==='order'">
			<commonButton title="立即支付" @click="payClcik"></commonButton>
		</template>


	</view>
</template>

<script>
	export default {
		props: {
			curIndex: Number,
			type: String,
			status: String
		},

		data() {
			return {

			}

		},

		computed: {
			palments() {


				if (uni.$u.platform === 'mp') {
					return [{
						icon: '/static/pay/wxpay.png',
						name: '微信'
					}]

				} else {
					if(this.status==='recharge'){
						return [{
							icon: '/static/pay/alipay.png',
							name: '支付宝'
						}, {
							icon: '/static/pay/wxpay.png',
							name: '微信'
						}]
					}else{
						return [{
							icon: '/static/pay/alipay.png',
							name: '支付宝'
						}, {
							icon: '/static/pay/wxpay.png',
							name: '微信'
						}, {
							icon: '/static/pay/qianpay.png',
							name: '余额'
						}]
					}
					
				}
			}
		},

		methods: {
			changepay(item, index) {
				this.$emit('click', index)

			},
			close() {
				this.$emit('close')
			},
			payClcik() {
				this.$emit('pay')

			}
		}
	}
</script>

<style>
</style>